<!-- /src/views/admin/AdminReview.vue (或者你对应的文件名) -- 完整替换 -->

<template>
  <div class="review-management-container">
    <el-card class="search-card">
      <el-form :inline="true" :model="searchParams" class="search-form" @submit.prevent="handleSearch">
        <el-form-item label="用户名">
          <el-input v-model="searchParams.username" placeholder="搜索用户" clearable />
        </el-form-item>
        <el-form-item label="商品名">
          <el-input v-model="searchParams.productName" placeholder="搜索商品" clearable />
        </el-form-item>
        <el-form-item label="评论状态">
          <!-- 【修改】value改成了与后端一致的数字，更稳定！ -->
          <el-select v-model="searchParams.status" placeholder="全部状态" clearable>
            <el-option label="未发布" :value="0"></el-option>
            <el-option label="已发布" :value="1"></el-option>
            <el-option label="已打回" :value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :icon="Search" @click="handleSearch">查询</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card class="table-card">
      <el-table :data="tableData" v-loading="loading" stripe>
        <el-table-column prop="reviewId" label="ID" width="80" />
        <el-table-column prop="username" label="用户" />
        <el-table-column prop="productName" label="商品" />
        <el-table-column label="评分" width="180">
          <template #default="{ row }">
            <el-rate v-model="row.rating" disabled show-score text-color="#ff9900" />
          </template>
        </el-table-column>
        <el-table-column prop="comment" label="评论内容" show-overflow-tooltip/>
        <el-table-column label="状态" width="120" align="center">
          <template #default="{ row }">
            <!-- 【修改】statusTag和statusText会根据数字返回正确的标签和文字 -->
            <el-tag :type="statusTag(row.status)">{{ statusText(row.status) }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="120" align="center" fixed="right">
          <template #default="{ row }">
            <!-- 【修改】逻辑简化：只有“已发布”(status===1)的评论才能被打回 -->
            <el-button
                v-if="row.status === 1"
                size="small"
                type="danger"
                link
                :icon="Close"
                @click="handleReject(row)"
            >
              打回
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页组件可以加上，如果你的后端支持的话 -->
      <!-- <el-pagination ... /> -->
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import { Search, Close } from '@element-plus/icons-vue';
import { searchReviews, rejectReview } from '@/api/admin/review';
import { ElMessage, ElMessageBox } from 'element-plus';

const loading = ref(false);
const tableData = ref([]);
const searchParams = reactive({
  username: '',
  productName: '',
  status: null, // 初始为null，表示查询所有
});

// 查询逻辑 (不变，等待后端修复)
const handleSearch = async () => {
  loading.value = true;
  tableData.value = []; // 先清空，防止看到旧数据
  try {
    const res = await searchReviews(searchParams);
    // 使用宽松等于，防止后端返回字符串'200'
    if (res.code == 200) {
      tableData.value = res.data;
    } else {
      ElMessage.error(res.message || '获取评论列表失败');
    }
  } catch(error) {
    console.error("搜索评论异常:", error);
    ElMessage.error("搜索请求失败，请检查后端接口！");
  }
  finally {
    loading.value = false;
  }
};

// 【新增】根据状态数字返回对应文字
const statusText = (status) => {
  switch(status) {
    case 0: return '未发布';
    case 1: return '已发布';
    case 2: return '已打回';
    default: return '未知';
  }
};

// 【修改】根据状态数字返回对应标签类型
const statusTag = (status) => {
  switch(status) {
    case 0: return 'warning'; // 未发布用警告色
    case 1: return 'success'; // 已发布用成功色
    case 2: return 'danger';  // 已打回用危险色
    default: return 'info';
  }
};

// 打回逻辑 (不变)
const handleReject = (row) => {
  ElMessageBox.confirm(`确定要打回用户【${row.username}】的这条评论吗？`, '操作确认', {
    type: 'warning',
  }).then(async () => {
    const res = await rejectReview({ reviewId: row.reviewId });
    if (res.code == 200) {
      ElMessage.success('评论已打回！');
      handleSearch();
    } else {
      ElMessage.error(res.message || '操作失败');
    }
  }).catch(() => {});
}

// 首次加载
onMounted(handleSearch);
</script>

<style scoped>
.review-management-container { padding: 20px; }
.search-card { margin-bottom: 20px; border-radius: 8px; }
.table-card { border-radius: 8px; }
</style>